<template>
	<view>
		<view class="main-contain">
			<view class="top-contain">
				<view class="top-left">
					<view class="top-left-header" @click="selectShow=true">
						<u--input placeholder="请选择班级" suffixIcon="arrow-down" suffixIconStyle="color: #909399"
							v-model="selectVal" customStyle="background-color: white;height:"
							placeholderStyle="color:#000000" readonly=true></u--input>
					</view>
					<view class="top-left-footer">
						<view class="class-time">
							<span>{{user.useClaTime}}</span>
							<span class="class-time-split">/</span>
							<span>{{user.totalClaTime}}</span>
							<span class="class-time-text-style">课时</span>
						</view>
					</view>
				</view>
				<view class="top-right">
					<u-avatar :src="avatarSrc" size="80"></u-avatar>
				</view>
			</view>
			<!-- 学生列表模块 -->
			<view class="student-list-contain">
				<!-- 搜索框 -->
				<view class="search-contain">
					<view class="search-label">
						<span>班级学生</span>
					</view>
					<view class="search-input">
						<u-search v-model="searchVal" :clearabled="false" :show-action="false" :show-icon="false"
							searchIconColor="black" borderColor="black" placeholder="请输入学生姓名" @clickIcon="searChange">
							<template #suffix>
								<view class="custom-search-icon" >
									<u-icon name="search" size="22" color="#909399"></u-icon>
								</view>
							</template></u-search>

					</view>
				</view>
				<!-- 学生列表 -->
				<view class="student-list">
					<view class="studnet-table">
						<view class="table-header">
							<span class="name-item">姓名</span>
							<span class="phone-item">联系电话</span>
							<span class="edit-item">操作</span>
						</view>
						<view class="table-th" v-for="(item,index) in filtereList" :key="index">
							<span class="th-name">{{item.name}}</span>
							<span class="th-phone">{{item.phone}}</span>
							<span class="th-edit">
								<u-button type="primary" text="上传作品" color="#4B71FF"
									customStyle="height:60rpx" @click="goToUploadEdit"></u-button>
							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 班级选择 -->
		<u-picker :show="selectShow" :columns="columns" keyName="label" closeOnClickOverlay @change="change" @cancel="cancel"
			@confirm="confirm" @close="close"></u-picker>
			
		<tabBar></tabBar>
	</view>
</template>

<script>
	import { getClassList, getStuList } from '@/api/myclass.js'

	export default {
		data() {
			return {
				stuName:'',
				claId:'',
				userId: 100,
				user: {
					totalClaTime: 20, //总课时
					useClaTime: 9, //已用课时
				},
				avatarSrc: "cloud://cloud1-6gveko5wef73d76d.636c-cloud1-6gveko5wef73d76d-1363348768/img/avatar1.png",
				selectVal: '',
				selectShow: false,
				columns: [
					['123', '234', '99']
				],
				claList: [],
				searchVal: 	'',
				stuList: [],
				filtereList: [], //学生查询
			}
		},
		created() {
			this.filtereList = this.stuList;
			this.initClass();
		},
		methods: {
			initClass() {
				const userId = 100
				console.log(this.userId, 123)
				const data = {
					userId: this.userId,
				}
				console.log("班级初始化");
				getClassList(data).then(res => {
					console.log(res, "班级列表");
					
					this.claList =  res.data.claList;
					console.log(this.columns)
					this.columns = this.claList.map(item => {
						return	{
							label: item.claDescribe,
							value: item.claId
						}
					});
					
					this.columns = [this.columns]
					console.log(this.columns)
				});
			},
			handleSelect() {
				console.log("选择班级");
			},
			close() {
				this.selectShow = false
			},
			change(e) {
				console.log('change', e);
			},
			confirm(e) {
				console.log('confirm', e.value);
				this.selectShow = false
				this.selectVal = e.value[0].label
				// console.log(e.value[0])
				this.claId = e.value[0].value
				console.log(this.claId)
				this.getAllStuList()
			},
			cancel() {
				console.log('cancel');
				this.selectShow = false
			},
			searChange() {
				console.log("查找班级学生");
				console.log(this.searchVal);
				const data = {
					claId: this.claId,
					stuName:this.searchVal
				}
				console.log(data,"xixi")
				getStuList(data).then(res => {
					console.log(res, "学生列表");
					this.filtereList = res.data.stuList.map(item =>{
						return {
							name: item.stuName,
							userId: this.userId,
							phone: item.stuPh,
						}
					})
					
					console.log(this.filtereList,"学生列表")
				});
				this.filtereList = this.stuList.filter(item => item.name.includes(e))
			},
			getAllStuList() {
				const data = {
					claId: this.claId,
				}
				console.log(data,"ID是个啥")
				getStuList(data).then(res => {
					// console.log(res, "学生列表");
					this.filtereList = res.data.stuList.map(item =>{
						return {
							name: item.stuName,
							userId: this.userId,
							phone: item.stuPh,
						}
					})
					
					console.log(this.stuList,"学生列表")
				});
			},
			goToUploadEdit() {
				uni.navigateTo({
					url: '/pages/myclass-edit/myclass-edit'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main-contain {
		padding-bottom: 80px;
		box-sizing: border-box;
		.top-contain {
			width: 100%;
			height: 15vh;
			background-color: #5B5EE4;
			display: inline-flex;

			.top-left {
				width: 50%;
				height: 100%;



				.top-left-header {
					height: 40%;
					width: 100%;
					padding: 7% 10% 0 10%;
					display: flex;
					box-sizing: border-box;

				}

				.top-left-footer {
					height: 60%;
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;


					.class-time {
						width: 90%;
						height: 80%;
						display: flex;
						align-items: center;
						color: #FFFFFF;
						justify-content: center;
						font-size: 40rpx;


						.class-time-split {
							margin: 0 20rpx;
						}

						.class-time-text-style {
							margin-left: 20rpx;
						}
					}

				}
			}

			.top-right {
				width: 50%;
				height: 100%;

				display: flex;
				box-sizing: border-box;
				padding-left: 10%;
				align-items: center;
			}
		}

		.student-list-contain {
			padding-bottom: 10rpx;
			width: 100%;
			border-radius: 12px;
			border: 1px solid #a6a6a6;

			.search-contain {
				width: 100%;
				height: 120rpx;
				display: inline-flex;

				.search-label {
					width: 40%;
					height: 100%;
					color: #BD3124;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26px;
					font-style: italic;
					font-family: 'PingFang SC-regular', sans-serif;
				}

				.search-input {
					width: 60%;
					height: 100%;
					display: flex;
					box-sizing: border-box;
					align-items: center;
					padding-right: 10%;


					::v-deep .u-search__content {
						flex-direction: row-reverse;
						background: #fff;
						border-radius: 40rpx;
						padding: 0 20rpx;

						.u-content__left-icon {
							margin-left: 10rpx;
							margin-right: 0;
						}

						.u-content__input {
							padding-right: 10rpx;
						}
					}

					.custom-search-icon {
						display: flex;
						align-items: center;
					}
				}
			}

			.student-list {
				width: 100%;
				box-sizing: border-box;
				padding: 0 8%;


				.studnet-table {
					width: 100%;
					height: 100%;
					background-color: #F7F7F7;

					.table-header {
						width: 100%;
						height: 80rpx;
						font-size: 32rpx;
						padding-top: 1%;
						line-height: 80rpx;
						box-sizing: border-box;
						margin-bottom: 20rpx;
						text-align: center;
						color: #101010;
						font-family: 'PingFang SC-regular', sans-serif;

						.name-item,
						.edit-item {
							width: 25%;
							height: 100%;

							display: inline-block;
							overflow: hidden;

						}

						.phone-item {
							width: 50%;
							height: 100%;

							display: inline-block;
							overflow: hidden;
						}
					}

					.table-th {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #101010;
						margin-bottom: 20rpx;

						.th-name,
						.th-edit {
							width: 25%;
							height: 100%;

							display: inline-block;
							overflow: hidden;

						}

						.th-phone {
							width: 50%;
							height: 100%;

							display: inline-block;
							overflow: hidden;
						}
					}
				}
			}
		}
	}
</style>